<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>评价列表</title>
<link rel="stylesheet" href="<%=basePath %>layui/css/layui.css" media="all">
<script src="<%=basePath %>layui/layui.js"></script>
<script src="<%=basePath %>js/jquery.min.js"></script>
</head>
<body>
<br/>
<!-- 条件查询 -->
<form class="layui-form" action="" onsubmit="return false;">
  <div class="layui-form-item"  style="margin-left: 130px;">
    <label class="layui-form-label">评价内容</label>
    <div class="layui-input-inline">
      <input type="text" name="content"  placeholder="请输入评价内容关键字" autocomplete="off" class="layui-input">
    </div>
    <label class="layui-form-label">是否回复</label>
    <div class="layui-input-inline">
      <select name="isAnswer"  autocomplete="off">
        <option value=""></option>
        <option value="1">已回复</option>
        <option value="0">未回复</option>
      </select>
    </div>
    <label class="layui-form-label">是否公开</label>
    <div class="layui-input-inline">
      <select name="isPublic"  autocomplete="off">
        <option value=""></option>
        <option value="1">公开</option>
        <option value="0">禁止</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <button class="layui-btn" lay-submit lay-filter="serchBtn"><i class="layui-icon">&#xe615;</i>搜索</button>
    </div>
  </div>
</form>
<hr>

<table id="demo" lay-filter="test"></table>

<!-- 添加的表单 -->
<form id="A_form" class="layui-form" action="" onsubmit="return false;" style="display:none">
<br>
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <select name="f_uid" lay-search="" id="A_f_uid" required lay-verify="required" autocomplete="off">
        <option value=""></option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">评价内容</label>
    <div class="layui-input-inline" style="width: 600px;">
      <textarea id="A_content" class="layui-textarea" name="content" style="display:none"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">电话</label>
    <div class="layui-input-inline">
      <input type="text" name="phone" required  lay-verify="required|phone" placeholder="请输入电话号" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="addBtn">添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<script>
	layui.use(['layedit'], function(){
		var layedit=layui.layedit;
		var index=layedit.build('demo1'); //建立编辑器
		layedit.setContent(index,"你好");
	});
</script>


<!-- 修改的表单 -->
<form id="U_form" lay-filter="U_form" class="layui-form" action="" onsubmit="return false;" style="display:none">
<br>
	<input type="hidden" name="id" />
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <select name="f_uid" lay-search="" id="U_f_uid" required lay-verify="required" autocomplete="off" disabled>
        <option value=""></option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">评价内容</label>
    <div id="U_Pcontent" class="layui-input-inline" style="width: 600px;">
      <textarea id="U_content" name="content" style="display:none"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">电话</label>
    <div class="layui-input-inline">
      <input type="text" id="U_phone" name="phone" required readonly="readonly" lay-verify="required|phone" placeholder="请输入电话号" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">回复内容</label>
    <div class="layui-input-inline" style="width: 600px;">
      <textarea id="U_answer" name="answer" style="display:none"></textarea>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">是否公开</label>
     <div class="layui-input-block">
         <input type="checkbox" name="isPublic" lay-skin="switch" lay-text="公开|禁止">
     </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="updateBtn">修改</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>


<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
   <%-- <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delAll"><i class="layui-icon">&#xe640;</i>批量刪除</button>--%>
  </div>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
  <%-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a> --%>
</script>

<script type="text/html" id="switchIsAnswer">
    <input type="checkbox" data-id="{{d.id}}" name="isAnswer" lay-filter="isAnswerSwitch" lay-skin="switch" lay-text="已回复|未回复"  {{d.isAnswer=="1" ? "disabled":""}} {{d.isAnswer=="1" ? "checked":""}}>
</script>
<script type="text/html" id="switchIsPublic">
    <input type="checkbox" data-id="{{d.id}}" name="isPublic" lay-filter="isPublicSwitch" lay-skin="switch" lay-text="公开|禁止" {{d.isPublic=="1" ? "checked":""}}>
</script>


<script type="text/javascript">

layui.use(['table','element','layer','form','upload','laydate','layedit'], function(){
	  var table = layui.table;
	  var layer = layui.layer;
	  var element = layui.element;
	  var form = layui.form;
	  var $ = layui.$;
	  var upload = layui.upload;
	  var laydate = layui.laydate;
	  var layedit = layui.layedit;
	  var currNow = 1; //声明一个全局变量存储当前页码
	  var A_content = "";
	  var U_content = ""; //建立编辑器
	  var U_answer = ""; //建立编辑器
	  	
	  
	  //第一个实例
	  table.render({
	    elem: '#demo'
	    ,height: 565
	    ,url: '<%=basePath %>back/queryAllMessage' //数据接口
	    ,page: true //开启分页
	    ,id:"showAll"
	    ,limits:[10,50,100]
	    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
	    ,done: function(res, curr, count){
	        //console.log(res.data);  //代表我们当前页的数据
	        
	        if(res.data==null){
	        	currNow = curr-1;  //如果当前页面没有数据了，就让页码-1
	        	//我们需要手动再重新刷新数据表格
	        	
	        	table.reload('showAll', {
		    			  where: { //设定异步数据接口的额外参数，任意设
		    			  }
		    			  ,page: {
		    			    curr: currNow //获取当前的页码
		    			  }
		    			}); //只重载数据
	        	
	        }else{
	        	currNow = curr;
	        }
	        
	      }
	    ,cols: [[ //表头
	    	{type: 'checkbox',}
	      ,{field: 'id', title: 'ID', width:80, sort: true}
	      ,{field: 'userName', title: '用户名', width:120,sort: true}
	      ,{field: 'name', title: '商品名称', width:120,sort: true}
	      ,{field: 'content', title: '留言内容', width:132, sort: true}
	      ,{field: 'phone', title: '联系方式', width: 120,sort: true,}
	      ,{field: 'createTime', title: '留言时间', width:160,sort: true} 
	      ,{field: 'isAnswer', title: '是否回复', width: 104,templet: '#switchIsAnswer'}
	      ,{field: 'answer', title: '回复内容', width: 132, sort: true}
	      ,{field: 'answerTime', title: '回复时间', width: 160, sort: true}
	      ,{field: 'ext2', title: '评论等级', width: 160, sort: true}
	      ,{field: 'isPublic', title: '是否公开', width: 100,templet: '#switchIsPublic'}
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
	    ]]
	  });
	  
	  
	//监听提交[搜索]
	  form.on('submit(serchBtn)', function(data){
	    //console.log(data.field);  //可以得到相关的参数值
	    //我们需要带着这些参数，重载一下表格就ok
	    table.reload('showAll', {
		  where: { //设定异步数据接口的额外参数，任意设
			content: data.field.content
		    ,isAnswer: data.field.isAnswer
		    ,isPublic: data.field.isPublic
		    //…
		  }
		  ,page: {
		    curr: 1 //重新从第 1 页开始
		  }
		}); //只重载数据
	  });
	
	
		//查询出用户用于展示下拉框
	  $.post("<%=basePath%>back/queryAllUserWitchMessageSelect",{
	  },function(res){
		  for(var i=0; i<res.length; i++){
			  $("#A_f_uid").append("<option value='"+res[i].id+"'>"+res[i].name+"</option>");
			  $("#U_f_uid").append("<option value='"+res[i].id+"'>"+res[i].name+"</option>");
			  form.render('select');  //让表单当中的select重新渲染
		  }
	  },'json');
	
	
	  
	  // 处理开关点击时把信息传入到后台进行修改
      form.on('switch(isAnswerSwitch)', function (data) {
          var id = $(this).attr('data-id');//获得当前点击对象的id值
          var valid = this.checked ? 'on' : 'off';//获取到点击后的开关状态（on/off）
          var x=data.elem.checked;//获取到点击后的开关状态（true/false）
          
          layer.prompt({
        	    formType: 2,    // 弹出文本层类型
        	    title: '请输入回复内容',    // 标题
        	    value:'',    // 可以设置文本默认值
        	    area: ['500px', '150px'],// 设置弹出层大小
        	    btnAlign: 'a',    // 设置按钮位置
        	    btn: ['回复','取消'],    // 自定义设置多个按钮
        	    yes: function(index, elem){
        	            // 得到value
        	            var value = layui.jquery('#layui-layer'+index + " .layui-layer-input").val();
        	            if (!value) {
        	            	layer.msg("回复内容不能为空！");
        	　　　　　　　　	return false;　　// 如果value为空，停止继续执行
        	        　  		}else{
        	        　  			$.ajax({
        	                        type : "POST",
        	                        url : "<%=basePath %>back/editMessageContentById/"+id+"/"+value+"/"+valid,
        	                        data : {},
        	                        success : function(res) {
        	                            if(res){
        	                                layer.msg("回复成功！");
        	                                window.setTimeout(function(){top.location.reload();},700);
        	                            }else{
        	                                layer.msg("回复失败！");
        	                                window.setTimeout(function(){top.location.reload();},700);
        	                            }
        	                            form.render();
        	                        },
        	                        error : function() {
        	                        }
        	                    });
        	        　  			return false;　
        	        　  		}
        	    },
        	    cancel: function(index, layero){ 
        	    	//window.location.href="javascript:location.replace(location.href);";
        	    	//右上角关闭回调
	                  data.elem.checked=!x;
	                  form.render();
                    //return false 开启该代码可禁止点击该按钮关闭
        	    },   
        	    end: function(index, layero){ 
        	    	//window.location.href="javascript:location.replace(location.href);";
        	    	//按钮【按钮二】的回调
                  data.elem.checked=!x;
                  form.render();
                  layer.close(index);
                  //return false 开启该代码可禁止点击该按钮关闭
        	    },   
        	}, function(value, index, elem){
        		// 得到value
        		//layer.msg(value);
        		//layer.close(index);
        		return false;
        	});
          
          form.render();
          return false;

      });
	  
	  
	  
	  
	  
	  // 处理开关点击时把信息传入到后台进行修改
      form.on('switch(isPublicSwitch)', function (data) {
          var id = $(this).attr('data-id');//获得当前点击对象的id值
          var valid = this.checked ? 'on' : 'off';//获取到点击后的开关状态（on/off）
          var x=data.elem.checked;//获取到点击后的开关状态（true/false）
          layer.open({
              content: '确定要修改当前状态吗？'//给用户的友好提示
              ,btn: ['确定', '取消']
              ,yes: function(index, layero){
                  data.elem.checked=x;
                  layer.close(index);
                  $.ajax({
                      type : "POST",
                      url : "<%=basePath %>back/editMessageIsPublicById/"+id+"/"+valid,
                      data : {},
                      success : function(res) {
                          if(res){
                              layer.msg("修改成功！");
                          }else{
                              layer.msg("修改失败！");
                          }
                          form.render();
                      },
                      error : function() {
                      }
                  });
              }
              ,btn2: function(index, layero){
                  //按钮【按钮二】的回调
                  data.elem.checked=!x;
                  form.render();
                  layer.close(index);
                  //return false 开启该代码可禁止点击该按钮关闭
              }
              ,cancel: function(){
                  //右上角关闭回调
                  data.elem.checked=!x;
                  form.render();
                  //return false 开启该代码可禁止点击该按钮关闭
              }
          });
          form.render();
          return false;
      });
	  
	  
	  
	  
	  
	//头工具栏事件
	  table.on('toolbar(test)', function(obj){
		console.log(obj);
	    var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	      case 'add':
	        /* var data = checkStatus.data;
	        layer.alert(JSON.stringify(data)); */
	        layer.open({
	        	  type: 1,
	        	  title:"添加页面",
	        	  area: ['800px', '500px'],
	        	  content: $('#A_form') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
	        	});
	        layui.use(['layedit'], function(){
	    		var layedit=layui.layedit;
	    		A_content = layedit.build('A_content',{height: 180,}); //建立编辑器
	    	});
	        
	      break;
	      case 'delAll':
	    	  var data = checkStatus.data;
	    	  if(data.length > 0){
	    		  layer.confirm('真的删除行这'+data.length+'行么', function(index){
	  	  	        var ids = "";
	  	  	        //通过循环将选中的id，用逗号拼接成一个字符串，例如：1，2，3，
	   	  	        for(var i =0; i<data.length; i++){
	  	  	        	ids += data[i].id+",";
	  	  	        }
	  	  	        $.post("<%=basePath%>back/delAllMessageByIds",{
	  	  	        	ids:ids
	  	  	        },function(res){
	  	  	        	if(res){
	  	  	        		layer.msg("删除成功");
	  	  	        		layer.closeAll('page');
	  	  	        		table.reload('showAll', {
	  	  		    			  where: { //设定异步数据接口的额外参数，任意设
	  	  		    			  }
	  	  		    			  ,page: {
	  	  		    			    curr: currNow //获取当前的页码
	  	  		    			  }
	  	  		    			}); //只重载数据
	  	  	        	}else{
	  	  	        		layer.msg("删除失败");
	  	  	        		layer.closeAll('page');
	  	  	        	}
	  	  	        },'json');
	  	    	  })
	    	  }else{
	    		  layer.msg("你还未选中要删除的行！");
	    	  }
	      break;
	    };
	  });
	  
	  //监听行工具事件
	  table.on('tool(test)', function(obj){
	    var data = obj.data;  //当前行的所有数据
	    console.log(obj)
	    if(obj.event === 'del'){
	      layer.confirm('真的删除行么', function(index){
	       /*  obj.del();
	        layer.close(index); */
	        //点击确定按钮的时候才会进来
	        var id = obj.data.id;
	        $.post("<%=basePath%>back/delMessageById/"+id,{
	        },function(res){
	        	if(res){
	        		layer.msg("删除成功");
	        		layer.closeAll('page');
	        		table.reload('showAll', {
		    			  where: { //设定异步数据接口的额外参数，任意设
		    			  }
		    			  ,page: {
		    			    curr: currNow //获取当前的页码
		    			  }
		    			}); //只重载数据
	        	}else{
	        		layer.msg("删除失败");
	        		layer.closeAll('page');
	        	}
	        },'json');
	      });
	    } else if(obj.event === 'edit'){
	    	
	    	
	    	if(data.isAnswer == 1){
	    		layer.msg("你已回复过了！");
	    	}else{
	    		layer.open({
		        	  type: 1,
		        	  title:"修改页面",
		        	  area: ['800px', '500px'],
		        	  content: $('#U_form') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		        });
	    		layui.use(['layedit'], function(){
		    		var layedit=layui.layedit;
		    		U_answer = layedit.build('U_answer',{height: 180,}); //建立编辑器
		    	});
	    		form.val('U_form', data);
	    		U_content = layedit.build('U_content',{height: 180,}); //建立编辑器
	    		//禁止修改用户的留言信息，为只读模式
		    	$("#U_Pcontent").css('pointer-events','none');
		    	//要给修改的表单回显数据
	    		form.val('U_form', data);
			    //form.render('select');
	    	}
	    	
	    	 
	    }
	  });
	  
	  //监听提交[添加按钮]
	  form.on('submit(addBtn)', function(data){
	    //console.log(data);  //可以得到添加表单中文本框的值
	    
		  if(layedit.getText(A_content) == "" || layedit.getText(A_content) == null){
		    	layer.msg("留言内容不能为空，请输入要留言的信息！");
		  }else{
			  
				//我们 需要发送一个请求，带上我们的参数。
			    $.post("<%=basePath%>back/addMessage",{
			    	f_uid:data.field.f_uid,
			    	content:layedit.getText(A_content),
			    	phone:data.field.phone,
			    },function(res){
			    	if(res){
			    		layer.close(layer.index);
			    		layer.msg("添加成功");
			    		layer.closeAll('page');
			    		table.reload('showAll', {
			    			  where: { //设定异步数据接口的额外参数，任意设
			    			  }
			    			  ,page: {
			    			    curr: 1 //重新从第 1 页开始
			    			  }
			    			}); //只重载数据
			    		//将表单中的数据进行清空【js的reset方法】
			    		$("#A_form")[0].reset();
			    	}else{
			    		layer.close(layer.index);
			    		layer.msg("添加失败");
			    		layer.closeAll('page');
			    		$("#A_form")[0].reset();
			    	}
			    },'json');
			  
		  }
	    
	  });
	  
	  //监听提交[修改按钮]
	  form.on('submit(updateBtn)', function(data){
	    //console.log(data);  //可以得到添加表单中文本框的值
	    
	    if(layedit.getText(U_answer) == "" || layedit.getText(U_answer) == null){
	    	layer.msg("回复内容不能为空，请输入要回复的信息！");
	    }else{
	    	
	    	//我们 需要发送一个请求，带上我们的参数。
		    $.post("<%=basePath%>back/editMessageById",{
		    	id:data.field.id,
		    	answer:layedit.getText(U_answer),
		    	isPublicStatus:data.field.isPublic,
		    },function(res){
		    	if(res){
		    		layer.close(layer.index);
		    		layer.msg("修改成功");
		    		layer.closeAll('page');
		    		table.reload('showAll', {
		    			  where: { //设定异步数据接口的额外参数，任意设
		    			  }
		    			  ,page: {
		    			    curr: currNow //重新从第 1 页开始
		    			  }
		    			}); //只重载数据
		    		//将表单中的数据进行清空【js的reset方法】
		    		$("#U_form")[0].reset();
		    	}else{
		    		layer.close(layer.index);
		    		layer.msg("修改失败");
		    		layer.closeAll('page');
		    		$("#U_form")[0].reset();
		    	}
		    	
		    },'json');
	    	
	    }
	    
	    
	  });
	  
	  
});


</script>
</body>
</html>